<template>
  <custom-dialog
    ref="dialog"
    :title="modalTitle"
    :before-confirm="beforeConfirm"
    :on-confirm="onConfirm"
    width="540px"
  >
    <el-form ref="form" :model="info" :rules="rules" label-width="90px">
      <el-form-item label="名称" prop="energyName">
        <el-select
          clearable
          v-model.trim="info.code"
          filterable
          :filter-method="handleFilterMethod"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in this.options"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
              @click="handleChange(item)"
            >
              <span>{{ item.name }}({{ item.energyUnit }})</span>
              <span style="opacity: 0.6">{{ item.code }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="编码" prop="code">
        <el-input disabled clearable v-model.trim="info.code"></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="energyUnit">
        <el-input clearable v-model.trim="info.energyUnit"></el-input>
      </el-form-item>
      <el-form-item label="能源用途">
        <el-select value="a" disabled placeholder="请选择" style="width: 100%">
          <el-option label="购进已消费" value="a"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="序号" prop="num">
        <template #label>
          <el-tooltip content="数值越小，排序靠前" placement="top">
            <span>
              序号
              <i class="el-icon-warning-outline" />
            </span>
          </el-tooltip>
        </template>
        <el-input-number
          v-model="info.num"
        ></el-input-number>
      </el-form-item>
    </el-form>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog';
import * as api from '@/api/energy';

export default {
  name: 'operate-modal',
  props: {
    modalTitle: String,
    index: Number,
    existTypeKind: {
      type: Array,
      default() {
        return [];
      }
    },
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    parentInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    energyCode: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    CustomDialog
  },
  data() {
    return {
      info: {
        num: 0,
        energyName: '',
        code: '',
        energyUnit: '',
        energyUse: '11'
      },
      rules: {
        num: [{ required: true, message: '请输入序号' }],
        energyName: [{ required: true, message: '请输入名称' }],
        code: [{ required: true, message: '请输入编码' }],
        energyUnit: [{ required: true, message: '请输入单位' }]
      },
      options: [],
      optionsSource: []
    };
  },
  computed: {},
  created() {},
  methods: {
    open() {
      const isAdd = Object.keys(this.data).length === 0;
      this.info = isAdd
        ? this.$options.data().info
        : {
            ...this.$options.data().info,
            ...this.data
          };
      if (isAdd) {
        this.info.num = this.index;
        this.options = this.handleOptions();
      } else {
        this.options = this.handleOptions(this.info.code);
      }
      this.optionsSource = this.options;

      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.$nextTick(() => {
        this.$refs.dialog.open();
      });
    },
    beforeConfirm() {
      return this.$refs.form.validate();
    },
    async onConfirm(close) {
      const params = { ...this.info };
      params.energyType = this.parentInfo.energyType;
      await this.saveOrUpdate(params);
      this.$emit('save-success');
      this.$message.success('保存成功');
      close();
    },
    async saveOrUpdate(params) {
      await api.saveOrUpdateKind(params);
    },
    handleChange(row) {
      this.info.energyName = row.name;
      this.info.energyUnit = row.energyUnit;
    },
    handleOptions(target) {
      const o = this.energyCode.filter(
        item => !this.existTypeKind.includes(item.code)
      );
      if (target) {
        const c = this.energyCode.find(item => item.code === target);
        o.push(c);
      }
      return o;
    },
    handleFilterMethod(val) {
      this.options = this.optionsSource.filter(
        item => item.name.includes(val) || item.code.includes(val)
      );
    }
  }
};
</script>

<style scoped></style>
